<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="stylesheet" type="text/css" href="css/04.less"/> -->
		<style type="text/less">
			//less的变量
			@color:pink;
			/*属性名/选择器作为变量，要加{}*/
			@m:margin;
			@selector:#wrap;
			
			*{
				@{m}: 0;
				padding: 0;
			}
			@{selector}{
				position: relative;
				width: 300px;
				height: 400px;
				border: 1px solid;
				margin: 0 auto;
				.inner{
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					margin: auto;
					
					background: @color;
					width:100px;
					height: 100px;
				}
			}
		</style>
	</head>
	<body>
		<!-- 
		less中的注释
		// 开头的注释，不会被编译到css文件中
		/**/ 包裹的注释，会被编译到css文件中
		 -->
		<div id="wrap">
			<div class="inner"></div>
		</div>
	</body>
	<!-- 这个一定要写在最后面，表示上面的less代码用这个编译 -->
	<script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script>
</html>
